    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">


    <select @change="changes()" v-model="areaId">

        <option value="">请选择</option>
        <option v-for="area in areas"
                :value="area.id"
                v-html="area.name">

        </option>
    </select>


    <select v-model="option">
        <option value="">请选择</option>
        <option v-for="city in cities"
                :value="city.id"
                v-html="city.name"></option>
    </select>

</div>


</body>

<script>

    new Vue({
        el: "#app",
        mounted() {

            axios.get("ByIdServlet?pid=0").then(response => {
                this.areas = response.data
            })

        },
        data() {
            return {
                areas: '',
                areaId: '',
                cities: '',
                option: ''
            }
        },
        methods: {


            changes() {
                let _this = this
                axios.get("ByIdServlet", {
                    params: {
                        pid: _this.areaId
                    }
                }).then(response => {

                    this.cities = response.data,
                        _this.option = ''

                })
            }

        }


    });


</script>


</html>